<template>
  <view class="couponCollection">
    <view class="couponCollection-ul">
      <view class="couponCollection-li flex flex-direction align-center">
        <image class="couponCollection-img" src="https://cdn-static.yekjx.com/shop/images/coup_head01.png" mode=""></image>
        <view v-if="invalid"> <image class="invalidImgCss" src="https://cdn-static.yekjx.com/food/images/coup_zs03.png" mode=""></image> </view>
        <view class="textStyle" :class="{invalidClass : invalid}">送你一张VIP专区券</view>
        <view class="textStyle" :class="{invalidClass : invalid}">快快收下吧</view>
        <view class="line2 lineMar generate"></view>
        <view class="card-box">
          <view class="card-box-img"> <image :src="invalid ? invalidImg : imgSrc" mode=""></image> </view>
          <view class="posiText-con flex flex-direction align-center">
            <text class="couponCollection-pic" :class="{invalidClass : invalid}">¥{{listData.coupon_money}}</text>
            <text class="couponCollection-vip" :class="{invalidClass : invalid}">VIP专区券</text>
          </view>
        </view>
        <view class="font-sq" :class="{invalidClass : invalid}">请于{{endTIme}}前使用</view>
        <view class="font-sq" :class="{invalidClass : invalid}">可享VIP专区优惠！</view>
      </view>
    </view>
    <view class="couponCollection-btn flex justify-center align-center" @click="receive" :class="{invalidClass : invalid}">
      立即领取
    </view>
    
    <uni-popup ref="popupCoupon" class="uni-propun-con" :safeArea="false">
    	<view class="popup-content">
    		<view class="uni-dialogCon">
    			<view class="belivery-title">领取失败</view>
    			<view class="popupEmil-input-text">
    				<text>  <text>{{  errText || '哎呀，这张券现在用不了，无法领取哦！' }}</text></text>
    			</view>
    			<view class="popupEmil-btn flex justify-between align-center">
    				<view @click="hidePop">重新领取</view>
    				<view @click="tapSure">好的</view>
    			</view>
    		</view>
    	</view>
    </uni-popup>
    
  </view>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { onLoad, onShow} from "@dcloudio/uni-app";
import { shareinfo,getShareDetail,sharegif } from '@/api/vmeitime-http/index.js'
import { mnavTo, showLoading, hideLoading,checkOrg } from '@/utils/helper';
import mapi from '@/utils/mapi'
import global from '@/utils/global';
const invalid = ref(false)
const imgSrc = ref('https://cdn-static.yekjx.com/food/images/coup_zs01.png')
const invalidImg = ref('https://cdn-static.yekjx.com/food/images/coup_zs02.png')
const popupCoupon = ref()
const isLogin = ref(false) //是否登录
const shareId = ref('')  //分享ID
const errText = ref('') //领取错误信息
const loaded = ref(false)
const listData = ref({
  coupon_money:''
})  //券信息
const endTIme = ref('') //使用期限
onLoad((options)=>{
  console.log('数据呢',options)
  if(options.shareId){   //解析分享参数
    shareId.value = options.shareId
    // getShareinfoFn(options.shareId)
    shareId.value&&storageFn()
  }
})
onShow(() =>{
  loaded.value&&storageFn()
})
//领取券的详细数据
const getShareinfoFn = async (shareId: any) => {
  try {
    showLoading();
    let res = await shareinfo({ shardId: shareId });
    hideLoading();
    if (!res.result) {
    	mapi.msg('服务器暂忙，请稍后尝试', res.code);
    	return
    }
    listData.value = res.object || [];
    invalid.value = res.status == '142' ? true : false
    // this.formatDate()
    endTIme.value = formatTimestamp(res.object.end_date)
  } catch (e) {
    hideLoading();
    mapi.msg('数据服务器暂忙，请稍后尝试..');
    console.log('', e);
  }
}
//格式化时间
const  formatTimestamp = (timestampStr:any) => {
    const year = timestampStr.slice(0, 4);
    const month = timestampStr.slice(4, 6);
    const day = timestampStr.slice(6, 8);
    const hour = timestampStr.slice(8, 10);
    const minute = timestampStr.slice(10, 12);
    const second = timestampStr.slice(12, 14);
    //${hour}:${minute}:${second}
    const formattedDate = `${year}-${month}-${day}`;
    return formattedDate; 
}
//存储
const  storageFn = async () => {
  isLogin.value = uni.getStorageSync(global.IS_LOGIN) || false;
  console.log('是否登录--------------------------------------------------',isLogin.value )
  if(!isLogin.value){
    if (!global.CENTER_LOGIN_PAGE) {
    	global.CENTER_LOGIN_PAGE = true; //进入登录页面
       mnavTo(`/pages/login/login`)
    }
  }
  loaded.value = true
  try{
     showLoading()
     let sdetail =  await getShareDetail({share_id:shareId.value})
     if(sdetail.result&&sdetail.object){
      hideLoading()
    	let nres = JSON.parse(sdetail.object.request_params);
    	console.log('getShareDetailgetShareDetail------------------------------------------------',nres);
    	let nparam = {
    		shareMemberId:'',
			buy_member_id:nres.buy_member_id||'',
    		sellMemberId:nres.sell_member_id||'',//暂
    		share_id:shareId.value||'',
    		event_id_1: nres.event_id||''
    	}
    	checkOrg(nparam)
      getShareinfoFn(shareId.value)
    	return
    }
   }catch (e) {
    loaded.value = true
    hideLoading();
    mapi.msg('获取分享详情信息失败!');
  }
}
//领取券
const receive = ()=> {
  if(invalid.value) return
  getSharegif(shareId.value)
}
//领取券的接口
const getSharegif = async (shardId:any)=> {
  try{
     showLoading()
     let res = await sharegif({ shardId : shardId })
     console.log('领取券返回的结果---------------',res)
     if (!res.result) {
       errText.value = res.shortMessage || ''
       console.log( 'this.errText-------------', res.shortMessage)
       setTimeout(() => {
         popupCoupon.value?.open('center')
         invalid.value = true
        }, 300)
     	// this.$api.msg(res.shortMessage);
     } else {
       mapi.msg('领取成功!');
       setTimeout(() => {
         uni.reLaunch({ url: '/pages/user/vipCoupon/vipCoupon'})
       }, 1000)
      
     }
   }catch (e) {
    hideLoading();
    mapi.msg('领取成功服务器暂忙，请稍后尝试');
    console.log('', e);
  }
}
const tapSure = ()=> {
   // invalid.value = true//暂
   popupCoupon.value?.close()
}

//重新选
const hidePop = ()=> {
   // invalid.value = true  //重新选
   popupCoupon.value?.close()
   // setTimeout(() => {
   //  getSharegif(shareId.value)
   // }, 100)
}

</script>

<style lang="scss">
  .invalidClass{
    color: #999 !important;
  }
  .couponCollection {
    padding-top: 40rpx;
    height: 100vh;
    background-color: #53A87F;
    position: relative;
  }
  .font-sq{
    color: #333;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: "Microsoft YaHei UI";
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 21px */
    &:last-child{
     margin-top: 16rpx;
    }
  }
  
  .invalidImgCss{
    width: 200rpx;
    height: 170rpx;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    right: 90rpx;
  }
  .card-box{
    width: 451.128rpx;
    height: 294.81rpx;
    flex-shrink: 0;
    position: relative;
    .couponCollection-pic{
      color: #765320;
      font-family: "Microsoft YaHei UI";
      font-size: 64rpx;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      letter-spacing: 0.64px;
      margin-top: 20rpx;
    }
    .couponCollection-vip{
      color: #765320;
      font-family: "Microsoft YaHei UI";
      font-size: 30rpx;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      margin-top: 40rpx;
      width: 270rpx;
      padding-left: 10rpx;
    }
    .posiText-con{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    .card-box-img{
      image{
        width: 451.128rpx;
        height: 294.81rpx;
      }
    }
  }
  .couponCollection-ul {
    width: 622.126rpx;
    height: 953.046rpx;
    border-radius: 16rpx;
    background: #FFF;
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.08);
    margin: 0 auto;

    .couponCollection-img {
      width: 106rpx;
      height: 106rpx;
      flex-shrink: 0;
      border-radius: 50%;
      border: 3px solid #FFF;
      margin: 94rpx 0 46rpx 0;
    }

    .textStyle {
      color: #333;
      font-feature-settings: 'clig' off, 'liga' off;
      font-family: "Microsoft YaHei UI";
      font-size: 36rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;
      /* 27px */
    }
    // 线条
    .dashed-background {
      width: 100%;
      height: 2px;
      background: repeating-linear-gradient(-45deg,
          transparent 0,
          transparent 2px,
          #ccc 2px,
          #ccc 4px);
    }
    .lineMar{
      margin: 60rpx 0 52rpx ;
    }
    .generate{
      position: relative;
      &:before{
        content: '';
        width: 48rpx;
        height: 48rpx;
        background-color: #53A87F;
        border-radius: 50%;
        position: absolute;
        left: -2rpx;
        transform: translate(-50%,-50%);
      }
      &::after{
        content: '';
        width: 48rpx;
        height: 48rpx;
        background-color: #53A87F;
        border-radius: 50%;
        position: absolute;
        right: -2rpx;
        transform: translate(50%,-50%);
      }
    }
    // 线条
    .line2 {
      width: 99%;
      height: 2px;
      background: linear-gradient(to left, transparent 8%, transparent 58%, #53A87F 50%, #53A87F 108%);
      background-size: 12px 3px;
      background-repeat: repeat-x;
    }
  }

  .couponCollection-btn {
    width: 666.772rpx;
    height: 84rpx;
    flex-shrink: 0;
    margin: 0 auto;
    position: absolute;
    bottom: 68rpx;
    border-radius: 10px;
    background: #FFF;
    color: #53A87F;
    text-align: center;
    font-family: "Microsoft YaHei UI";
    font-size: 32rpx;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.32px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  // 弹出层
  .popup-content {
  	background-color: #fff;
  	border-radius: 16rpx;
  	width: 530rpx;
  	padding-bottom: 40rpx;
  	flex-shrink: 0;
  
  	.uni-dialogCon {
  		.belivery-title {
  			color: #000;
  			font-family: "Microsoft YaHei UI";
  			font-size: 18px;
  			font-style: normal;
  			font-weight: 700;
  			line-height: normal;
  			display: flex;
  			justify-content: center;
  			padding: 30rpx 0;
  		}
      .popupEmil-input-text{
        display: flex;
        width: 450rpx;
        height: 156rpx;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
        margin: 0 auto;
        color: #333;
        text-align: justify;
        font-family: "Microsoft YaHei UI";
        font-size: 32rpx;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.32px;
        text-align: center;
      }
  		.popupEmil-btn {
  			width: 440rpx;
  			margin: 0 auto;
  			padding-top: 40rpx;
  			view {
  				width: 202rpx;
  				height: 80rpx;
  				flex-shrink: 0;
  				border-radius: 5px;
  				border: 1px solid #5DB175;
  				background-color: #fff;
  				display: flex;
  				justify-content: center;
  				align-items: center;
  				color: #5DB175;
  				font-family: ABeeZee;
  				font-size: 32rpx;
  				font-style: normal;
  				font-weight: 400;
  				line-height: normal;
  
  				&:nth-child(2) {
  					background-color: #5DB175;
  					color: #fff;
  				}
  			}
  		}
  	}
  }
  // 弹出层 end
</style>